import { defineComponent, reactive, ref, toRefs, watch, onMounted } from 'vue'
import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
import 'tinymce/plugins/accordion' // 手风琴
import 'tinymce/plugins/advlist' // 不知道是啥东西
import 'tinymce/plugins/anchor' // 锚点
import 'tinymce/plugins/autolink' //
import 'tinymce/plugins/emoticons' // 表情
import 'tinymce/plugins/directionality'
import 'tinymce/plugins/insertdatetime' //  时间日期
import 'tinymce/plugins/media' // 插入视频插件
import 'tinymce/plugins/image' // 插入上传图片插件
import 'tinymce/icons/default' //引入编辑器图标icon，不引入则不显示对应图标
import 'tinymce/models/dom' // 这里是个坑 一定要引入
import 'tinymce/icons/default/icons'
import 'tinymce/plugins/charmap'
import 'tinymce/plugins/preview' //  预览
import 'tinymce/plugins/quickbars'
import 'tinymce/plugins/searchreplace'
import 'tinymce/plugins/table' // 插入表格插件
import 'tinymce/plugins/template' // 模板
import 'tinymce/plugins/codesample' // 模板
import 'tinymce/plugins/visualblocks' // 显示区块边框
import 'tinymce/plugins/visualchars' // 显示不可见字符
import 'tinymce/plugins/lists' // 列表插件
import 'tinymce/plugins/help' // 字数统计插件
import 'tinymce/plugins/wordcount' // 字数统计插件
import 'tinymce/plugins/code' // 源码
import 'tinymce/plugins/fullscreen' //全屏
import Oss from '@/utils/aliOss'
export default defineComponent({
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    baseUrl: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    plugins: {
      type: [String, Array],
      default: 'lists  table'
    },
    toolbar: {
      type: [String, Array],
      default:
        'codesample bold italic underline alignleft aligncenter alignright alignjustify | undo redo | formatselect | fontselect | fontsizeselect | forecolor backcolor | bullist numlist outdent indent | lists link table code | removeformat '
    }
  },
  emits: ['update:modelValue'],
  setup: function (props, { emit }) {
    const myValue: any = ref('')
    myValue.value = toRefs(props).modelValue
    const tinymceId = ref(`vue-tinymce-${+new Date()}${(Math.random() * 1000).toFixed(0)}`)
    const init = reactive({
      selector: `#${tinymceId.value}`,
      language_url: '/tinymce/langs/zh_CN.js',
      language: 'zh_CN', //语言
      content_css: '/public/tinymce/skins/content/default/content.css',
      toolbar_mode: 'floating',
      skin_url: '/tinymce/skins/ui/oxide',
      emoticons_database_url: '/tinymce/emojis.js',
      height: 500,
      branding: false,
      menubar: true,
      browser_spellcheck: true,
      statusbar: false,
      promotion: false,
      paste_data_images: true,
      // templates: "/dir/templates.php"
      templates: [
        {
          title: '测试标题',
          description: '测试副标题',
          content: '这是模板内容，<b class="cdate">加粗这里将会显示%m/%d/%Y : %H:%M:%S</b>。'
        }
      ],
      plugins:
        'codesample visualchars visualblocks template preview insertdatetime directionality emoticons autolink anchor advlist accordion quickbars searchreplace charmap code lists image media wordcount table fullscreen',
      toolbar:
        'code fullscreen preview undo redo formatselect bold italic forecolor backcolor charmap emoticons codesample alignleft aligncenter alignright alignjustify  bullist numlist outdent indent  lists image media table  removeformat',
      images_upload_handler: async (blobInfo: any) => {
        const file = blobInfo.blob() //转化为易于理解的file对象
        const data = await new Promise((rel: any) => {
          Oss.ossUploadFile({
            file,
            onSuccess: (e: string) => {
              rel(e)
            },
            onError: () => {
              //  TODO
            },
            onProgress: () => {
              //  TODO
            }
          })
        })
        return data
      }
    })

    //监听富文本中的数据变化
    watch(
      () => myValue.value,
      () => {
        emit('update:modelValue', myValue.value)
      }
    )

    watch(
      () => props.modelValue,
      () => {
        myValue.value = props.modelValue
      }
    )
    //在onMounted中初始化编辑器
    onMounted(() => {
      tinymce.init({})
    })
    return () => (
      <>
        <div class="y-paser" style={{ width: '100%' }}>
          <Editor
            id={tinymceId.value}
            v-model={myValue.value}
            disabled={props.disabled}
            init={init}
          />
        </div>
      </>
    )
  }
})
